<template>
	<!-- 提交反馈 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="提交反馈" />
		<view class="main">
			<view class="title">填写反馈内容</view>
			<textarea v-model="content" maxlength="100" placeholder="100字以内" />
			<view class="uploadimage">
				<view v-for="(item,index) in imageList" :key="index" class="image">
					<image :src="item" @click="priviews(imageList,index)" class="img"></image>
					<image src="/static/images/mine/delete.png" class="icon" @click="deleteItem(index)"></image>
				</view>
				<image src="/static/images/upimg.png" class="uploadbtn" v-if="imageList.length < 6" @click="openImage"></image>
			</view>
			<view class="btn" @click="submit">提交</view>
			<view class="desc">为保护您的隐私，平台不会将您的反馈披露给任何第三方</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				content:'',//反馈内容
				imageList:[],//展示-完整路径
				imgs:[],//提交-相对路径
				allowTap:true// 防误触
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		methods: {
			openImage () {
				uni.chooseImage({
					count: 6 - this.imageList.length,
					success:(data)=> {
						console.log(data)
						let tempFilePaths = data.tempFilePaths;
						let tempFiles = data.tempFiles;
						for(let i=0;i<tempFilePaths.length;i++){
							let tempFilePaths = data.tempFilePaths[i];
							this.$request.uploadImage(tempFilePaths).then(res => {
								this.imageList.push(res.url);
								this.imgs.push(res.url1);
							})
						}
					}
				})
			},
			priviews(imgs,i){
				uni.previewImage({
					urls:imgs,
					current:i
				})
			},
			deleteItem (index) {
				this.imageList.splice(index, 1);
				this.upimageList.splice(index, 1);
			},
			//提交
			submit(){
				if(this.content == ''){
					uni.showToast({
						title:'请填写反馈内容',
						icon:'none'
					})
					return
				}
				if(!this.allowTap) return
				this.allowTap = false;
				setTimeout(()=>{
					this.allowTap = true;
				},2000)
				this.$api.userspushquestion({
					question_id:this.id,
					content:this.content,
					imgs:this.imgs.toString()
				}).then(res=>{
					uni.showToast({
						title:'提交反馈成功'
					})
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 100rpx) 0 30rpx;
}
.main{
	width: 750rpx;
	height: calc(100vh - 120rpx);
	background: #FFFFFF;
	padding: 40rpx;
	margin-top: 15rpx;
	
	.title{
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #1A1A1A;
	}
	textarea{
		width: 671rpx;
		height: 301rpx;
		background: #FFFFFF;
		border: 1rpx solid #C9C9C9;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin: 36rpx 0 49rpx;
	}
	.uploadimage{
		display: flex;
		flex-wrap: wrap;
		margin-top: 33rpx;
		
		.image{
			width: 190rpx;
			height: 190rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			position: relative;
			
			&:nth-child(3n){
				margin-right: 0;
			}
			.img {
				@include img;
				border-radius: 20rpx;
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
	.uploadbtn{
		width: 190rpx;
		height: 190rpx;
	}
	.text{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}
	input{
		width: 630rpx;
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		text-align: center;
	}
	.btn{
		width: 630rpx;
		height: 80rpx;
		background: #FF773B;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		@include center;
		margin: 79rpx auto 39rpx;
	}
	.desc{
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A6A6A6;
		margin-top: 39rpx;
		text-align: center;
	}
}
</style>
